"use strict";
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
class Sector {
    x;
    y;
    r;
    startAngle;
    endAngle;
    color;
    constructor(x, y, r, startAngle, endAngle, color) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.startAngle = startAngle;
        this.endAngle = endAngle;
        this.color = color;
        this.draw();
    }
    draw(scale = 1) {
        ctx.beginPath();
        ctx.moveTo(this.x, this.y);
        // 绘制圆弧
        ctx.arc(this.x, this.y, this.r * scale, this.startAngle, this.endAngle);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
    }
}
const values = [
    { value: 4198, name: "Search Engine" },
    { value: 7135, name: "Direct" },
    { value: 5810, name: "Email" },
    { value: 4814, name: "Union Ads" },
    { value: 3010, name: "Video Ads" },
];
const total = values.reduce((pre, next) => pre + next.value, 0);
const sectors = [];
let startAngle = -Math.PI / 2; // 起始角度从顶部开始
// 根据值绘制角度
values.forEach((item, index) => {
    const sliceAngle = (item.value / total) * 2 * Math.PI;
    const endAngle = startAngle + sliceAngle;
    const color = `#${Math.random().toString(16).slice(2, 8).padEnd(6, "0")}`;
    sectors.push(new Sector(canvas.width / 2, canvas.height / 2, 150, startAngle, endAngle, color));
    startAngle = endAngle; // 更新 startAngle 为当前扇形的结束角度
});
// 绘制内圆，形成环状效果
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 75, 0, 2 * Math.PI);
ctx.globalCompositeOperation = "destination-out";
ctx.fill();
ctx.globalCompositeOperation = "source-over";
// 鼠标移入事件处理器
canvas.addEventListener("mouseenter", () => {
    canvas.style.cursor = 'default';
});
// 鼠标移动事件处理器
canvas.addEventListener("mousemove", (event) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;
    let hovered = false;
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    // 计算鼠标相对于画布中心的角度
    const dx = mouseX - canvas.width / 2;
    const dy = mouseY - canvas.height / 2;
    let angle = Math.atan2(dy, dx);
    if (angle < 0)
        angle += 2 * Math.PI; // 确保角度范围在 [0, 2 * Math.PI] 内
    // 遍历每个扇形，检查是否与鼠标位置相交
    sectors.forEach((sector, index) => {
        const startAngle = sector.startAngle;
        const endAngle = sector.endAngle;
        // 判断鼠标位置是否在当前扇形的角度范围内
        if (angle >= startAngle && angle <= endAngle) {
            const dx = mouseX - sector.x;
            const dy = mouseY - sector.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            // 判断鼠标位置是否在当前扇形的半径范围内
            if (distance <= sector.r) {
                canvas.style.cursor = 'pointer';
                sector.draw(1.5); // 放大1.5倍
                hovered = true;
            }
        }
        // 绘制扇形
        sector.draw(); // 正常大小
    });
    // 重绘内圆，保持环状效果
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, 75, 0, 2 * Math.PI);
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fill();
    ctx.globalCompositeOperation = 'source-over';
    // 如果没有扇形被悬停，则恢复光标样式
    if (!hovered) {
        canvas.style.cursor = 'default';
    }
});
ctx.font = "40px sans-serif";
ctx.fillText("Direct", 150, 200, 200);
